<template>
  <div class="common-layout">

    <el-container>

      
     <el-aside  :class="[isCollapse? 'isCollapse':'']">

 
            <NavPlus ></NavPlus>

     

      </el-aside>
      <el-container>
        <el-header> <HeaderLayout></HeaderLayout> </el-header>
     
          <el-main> 
            <transition
              name="router-transition"
              mode="out-in"
            >
            <router-view  :key="$route.fullPath"/> 
            </transition>
          </el-main>
       
        </el-container>
    </el-container>
  </div>

  <UserInfoDialog ></UserInfoDialog>

</template>

<script setup> 

// import Nav from "../components/Nav.vue";
import NavPlus from "../components/navigation/NavPlus.vue";
import UserInfoDialog from "../components/dialog/UserInitInfoDialog.vue";
import HeaderLayout from "../components/navigation/HeaderLayout.vue";
import { onMounted, provide, ref } from "vue";
import useStore from "../store";
import router from '@/router'

router.beforeEach((to, from, next) => {
  // 检查是否要访问该组件
    console.log(to);
  if (to.name === 'Home') {
    console.log('home');
    // 如果是，重定向到 /todo/all
    next('/todo/all')
  } else {
    // 否则，继续导航
    next()
  }
})
const isCollapse = ref(false)
const isNull = ref(true)


onMounted(()=>{
  if(useStore().user.userinfo){
    isNull.value = true
  }
})


const handleCollapse = () => {

  isCollapse.value = !isCollapse.value

}

const handleDialog = () => {

  isCollapse.value = !isCollapse.value
  
}


provide('isFirstLogin',{isNull,handleDialog})
provide('isCollapse',{isCollapse,handleCollapse})

</script>

<style lang="less" scoped>
@import "../assets/fonts/index.css";

html,
body {
  font-family: pingfang;
  height: 100%;
}


#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;


}
.common-layout {

 .el-container{
  .el-aside {
   
    transition: all 0.3s ease;

   
    width:240px;
    background-color: #fff;
    }

    .el-aside.isCollapse{
      width: 100px;
      transition: all 0.3s ease;
    }
    .el-container{
      background-color: #F5F7FA;
      .el-main {

      margin-top: 12px;
      width: 100%;
      background-color: #F5F7FA;


    }
      .el-header{
        background-color: #F5F7FA;
      
        display: flex;
        align-items: center;
  
        
      }
    }
 }
}
.router-transition-enter-active,
  .router-transition-leave-active {
    transition: all 0.4s ease-in-out;
  }
  .router-transition-enter-from,
  .router-transition-leave-to {
    opacity: 0;
 
    transform: translateX(20px);
  }


    /*设置宽度,轨道颜色*/
  ::-webkit-scrollbar {
      width: 10px;

      background: #F5F7FA;   /*可以设置轨道颜色*/
      padding-right: 2px;
  }
 
  /*滚动条*/
  ::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 10px;
  }

</style>
